<template>
	<!-- 创建编辑新考试 -->
	<div class="addExamMain">
	  <div class="addExamContent">
		<h3>{{examname.schoolname}}-考试明细</h3>
		<ul>
		  <li>
			<span>新增考试：</span>
			<div class="inputBox">
				<el-cascader
              :options="subjectlist"
              :props="{
                label: 'subjectname',    // 将 'subjectname' 字段映射为显示文本
                value: 'id',             // 将 'id' 字段映射为值
                children: 'children',    // 子节点字段名
                lazy: true,              // 开启懒加载
                lazyLoad: this.lazyLoad  // 懒加载函数
              }"
              clearable
              @change="handleCascaderChange"
            ></el-cascader>
			</div>
		  </li>
		</ul>
		<el-table
		  class="custom-table"
		  ref="multipleTable"
		  :data="schoollistdetails"
		  tooltip-effect="dark"
		  style="width: 100%"
		  :height="tableheight"
		  stripe
		  @selection-change="handleSelectionChange1"
		  :header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }">
		  <el-table-column
			type="selection"
			width="55">
		  </el-table-column>
		  <el-table-column
			prop="name"
			label="序号">
			<template slot-scope="scope">  
			  <span>{{ scope.$index + 1 }}</span>
			</template>
		  </el-table-column>
		  <el-table-column
			label="考试名称">
			<template slot-scope="scope">  
			  <span>{{ scope.row.schoolname ? scope.row.schoolname : '--' }}</span>
			</template>
		  </el-table-column>
		  <el-table-column
			label="科目">
			<template slot-scope="scope">  
			  <span>{{ scope.row.nav6name ? scope.row.nav6name : '--' }}</span>
			</template>
		  </el-table-column>
		  <el-table-column
			fixed="right"
			label="操作"
			align="center"
			width="120">
			<template slot-scope="scope">
			  <div style="display: flex;justify-content: center;" class="scopednr">
				<b v-if="scope.row.subjectlyType == 0" style="color:#165DFF;margin-left:12px;cursor: pointer;" @click="examlyswitch(scope.row)">联阅</b>
				<b v-if="scope.row.subjectlyType == 1" style="color:#D54941;margin-left:12px;cursor: pointer;" @click="notexamlyswitch(scope.row)">不联阅</b>
				<b style="color:#D54941;margin-left:12px;cursor: pointer;" @click="deleteswitch(scope.row)">删除</b>
			  </div>
			</template>
		  </el-table-column>
		</el-table>
		<div class="elbuttonbox">
		  <el-button @click="bactchdelete">批量删除</el-button>
		  <!-- <el-button>保存</el-button> -->
		  <el-button @click="goback">返回</el-button>
		</div>
	  </div>
	</div>
  </template>
  
  <script>
  import { 
	examschoolapidetails,
	getSubjectslist, 
	subjectidtjsubject,
	addsubjectSchoolToNav6,
	getAllschoolSubjectNomark,
	getAllschooldeleteGroup,
	deletesubjectSchoolToNav6,
	deleteschoolsubject
   } from '../../api/api';
  
  export default {
	props: ['examobj', 'addexamtype', 'examname'],
	data() {
	  return {
		addinfo: {
		  name: '',
		  subject: '',
		  status: '',
		  model: '',
		  school: '',
		  ipname: ''
		},
		filteredOptions: [],
		searchQuery: '',
		examclassify: [],
		schoollistdetails: [],
		multipleSelection: [],
		tableheight: 400,
		subjectlist: []
	  };
	},
	mounted() {
	  this.schooldetails();
	  this.getsubjectlistclick();
	},
	methods: {
	  handleSelectionChange1(val) {
		this.multipleSelection = val;
	  },
	  goback() {
		this.$emit('examMxclick', false);
	  },
	  schooldetails() {
		let obj = {
		  nav5id: this.examname.nav5id,
		  gradeid: this.examname.gradeid
		};
		examschoolapidetails(obj).then(res => {
		  console.info(res);
		  if (res.code == 0) {
			this.schoollistdetails = res.obj;
		  } else {
			this.$message({
			  message: res.msg,
			  type: 'error'
			});
		  }
		});
	  },
	  // 获取学科列表
	  getsubjectlistclick() {
		getSubjectslist().then(res => {
			if (res.code === 0) {
			this.subjectlist = res.obj.map(item => ({
				id: item.id,
				subjectname: item.subjectname,
				children: [] // 初始化二级选项为空数组
			}));
			} else {
			this.$message.error(res.msg);
			}
		});
	  },
		// 懒加载函数
		async lazyLoad(node, resolve) {
		const { level, value } = node;

		// 第一级数据直接使用 subjectlist
		if (level === 0) {
			resolve(this.subjectlist);
		} else {
			try {
			// 调用接口获取二级数据
			const res = await subjectidtjsubject({ subjectid: value, nav5id: this.examname.nav5id });
			if (res.code === 0) {
				// 将接口返回的数据转换为级联组件需要的格式
				const children = res.obj.map(item => ({
					id: item.id,
					subjectname: item.name,
					leaf: true // 标记为叶子节点
				}));
				console.info('children',children);
				resolve(children);
			} else {
				this.$message.error(res.msg);
				resolve([]); // 如果接口失败，返回空数组
			}
			} catch (error) {
			console.error('获取子科目失败:', error);
			this.$message.error('获取子科目失败');
			resolve([]); // 如果发生错误，返回空数组
			}
		}
		},
	  // 级联选择器值变化时的处理
	  handleCascaderChange(value) {
		console.log(value); // 打印选中的值
		// 可以在这里处理选中的值，例如保存到 addinfo 中
		let obj={
			gradeids:[this.examname.gradeid],
			nav6id:value[1]
		}
		addsubjectSchoolToNav6(obj).then(res=>{
			if(res.code==0){
				this.schooldetails()
			}else{
				this.$message.error(res.msg)
			}
		})
	  },
	  //联阅开关
	  examlyswitch(row){
			let obj={
				nav6id:row.nav6id,
				gradeid:row.gradeid
			}
			getAllschoolSubjectNomark(obj).then(res=>{
				if(res.code==0){
					this.schooldetails()
				}else{
					this.$message.error(res.msg)
				}
			})
		},
		// 不联阅开关
		notexamlyswitch(row){
			let obj={
				nav6id:row.nav6id,
				gradeid:row.gradeid
			}
			getAllschooldeleteGroup(obj).then(res=>{
				if(res.code==0){
					this.schooldetails()
				}else{
					this.$message.error(res.msg)
				}
			})
		},
		// 删除
		deleteswitch(row){
			let obj={
				nav6ids:[row.nav6id],
				gradeid:row.gradeid
			}
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				deleteschoolsubject(obj).then(res=>{
					if(res.code==0){
						this.schooldetails()
					}else{
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
		//批量删除
		bactchdelete(){
			// console.info(this.multipleSelection)
			let ids = this.multipleSelection.map(item => item.nav6id)
			let obj={
				nav6ids:ids,
				gradeid:this.multipleSelection[0].gradeid
			}
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				deleteschoolsubject(obj).then(res=>{
					if(res.code==0){
						this.schooldetails()
					}else{
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		}
	}
  };
  </script>

<style scoped>
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:80px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.el-checkbox{
		margin-right:8px;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.inputBox1 >>> .el-tag.el-tag--info{
		background: #F2F6FB;
		border: 1px solid #D8E4F0;
		color: #B3B8C2;
	}
	.inputBox1 >>> .el-select .el-tag__close.el-icon-close{
		background:none;
		color:#B3B8C2;
	}
    .inputBox >>> .distpicker-address-wrapper select{
		border-radius: 10px;
    	height: 35px;
		font-size: 16px;
		line-height: 35px;
		border: 1px solid #D8E4F0;
		color:#606266;
		padding:0 10px;
	}
    .custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
     .el-table .el-table__cell{
        padding:8px 0;
    }
	.elbuttonbox{
		padding-top:15px;
	}
	.elbuttonbox >>> .el-button{
	    background:#165DFF;
		height:36px;
		color:#fff;
		font-weight:normal;
		border:solid 1px #165DFF;
	}
	.elbuttonbox >>> .el-button:first-child{
		background:	#D54941;
		border:solid 1px #D54941;
	}
	.elbuttonbox >>> .el-table ,.elbuttonbox >>> .el-table__cell{
		padding:8px 0;
	}
</style>